import React, { FC } from 'react'
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input } from 'antd';
import * as api from '../../api/login'
import '../../style/login.css'
import { useNavigate } from 'react-router-dom';
import storage from '@/utils/storage';

const Login: FC<{}> = () => {
    ////引入路由跳转
    let navigate = useNavigate()
                ////这个value就是form表单中输入的数据  onFinish方法在点击登录时触发
    const onFinish = (values: any) => {
        // console.log(values);
        
        ////发起请求
        api.normalLogin(values.username,values.password)
            .then(res => {
                console.log(res);   
                if(res.data.state){
                    ////存储token
                    storage.set('lh-token',res.data.token)
                    storage.set('user',res.data.userInfo)
                    storage.set('permission',res.data.permission)
                    ////页面跳转
                    navigate('/')
                }
            })
        console.log('Received values of form: ', values);
    };


    return (
        <div className='login_box'>
            <div className='login'>
                <Form
                    name="normal_login"
                    className="login-form"
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                >
                    <Form.Item
                        label='username'
                        name="username"
                        rules={[{
                            required: true,
                            ////自定义校验
                            validator: async (_, names) => {
                                let reg = /^[A-Za-z0-9]{2,15}$/;
                                if (!names || !reg.test(names)) {
                                    return Promise.reject(new Error('请输入3-15位账号'));
                                }
                            },
                        }]}
                    >
                        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
                    </Form.Item>
                    <Form.Item
                        label='password'
                        name="password"
                        rules={[{
                            required: true,
                            ////自定义校验
                            validator: async (_, names) => {
                                if (!names || names.length < 3) {
                                    return Promise.reject(new Error('好好输密码！'));
                                }
                            },
                        }]}
                    >
                        <Input
                            prefix={<LockOutlined className="site-form-item-icon" />}
                            type="password"
                            placeholder="Password"
                        />
                    </Form.Item>
                    <Form.Item>
                        <Form.Item name="remember" valuePropName="checked" noStyle>
                            <Checkbox>记住密码</Checkbox>
                        </Form.Item>

                      
                    </Form.Item>

                    <Form.Item>
                        <Button type="primary" htmlType="submit" className="login-form-button">
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    )
}

export default Login